@charset "utf-8";
/*分页共通样式*/
@import  "helpers/_mixins.scss";  

.banner{
	position: relative;
	height:410px;
	overflow:hidden;
	&:hover{
		.layout .next, .layout .prev{
			display:block;
		}
	}
	ul{
		li{
			width:100%;
			height:410px;
			position: absolute;
			opacity:1;
			overflow:hidden;
			a{
				width: 100%;
    			height: 100%;
    			display:block;
			}
		}
	}
	.layout{
		@extend %indexlayout;
		position: relative;
		height:410px;
		.controls{
			position: absolute;
			bottom:20px;
			left:400px;
		    height: 30px;
		    width:200px;
		    line-height: 30px;
		    text-align: center;
		    z-index: 10;
		    i{
				display: inline-block;
			    width: 12px;
			    height: 12px;
			    margin: 0 5px;
			    background:none;
			    background-color: #fff;
			    cursor: pointer;
			    border-radius: 50%;
			    @include  box-shadow(0 3px 3px rgba(0,0,0,.5));
			}
			.now{
				background-color:#666666;
			}
		}
		
		.next, .prev{
			position: absolute;
			top:50%;
			margin-top:-29px;
			width:50px;
			height:50px;
			z-index:20;
			display:none;
		}
		.next {	
				right:-70px;
				background:url(../images/sprite.png) no-repeat -50px -21px;
		}
		.prev {
				left:-70px;
				background:url(../images/sprite.png) no-repeat 0 -21px;
		}
		.banner_pop{
			width:200px;
			height:240px;
			position:absolute;
			right:-5px;
			top:45px;
			text-align:center;
			z-index:99;
			background-color:rgba(0,0,0,.4);
			@include border-radius(10px);
			.txt1{
				font-size:12px;
				color:$whiteColor;
				margin-top:40px;
			}
			.txt2{
				font-size:40px;
				color:#666666;
				margin-top:34px;
				span{
					font-size:16px;
				}
			}
			a{
				width:170px;
				height:30px;
				line-height:30px;
				margin-top:35px;
				font-size:14px;
				color:$whiteColor;
			}
		}
	}	
}